<template>
  <div class="container">
    <Navbars ></Navbars>
    <!-- 条件 -->
    <div class="querydiv" shadow="never">
      <el-form :inline="true" size="medium" label-width="70px">
        <el-form-item label="上级版本">
          <el-select-tree popper-class="stafftree" :popper-append-to-body="false"
              clearable style="width:100%" :highlight-current="true" 
              :props="defaultProps" 
              :default-expand-all="false" placeholder="请选择版本" :data="tableData" :show-checkbox="true" :check-strictly="true"
              v-model="listQuery.pid" 
          ></el-select-tree>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="listQuery.name" placeholder="版本名称"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="listQuery.code" placeholder="版本编码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btn btncolor" type="primary" @click="getList">查询</el-button>
          <el-button class="btn" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="mt15">
      <el-card class="tab-card" shadow="never">
        <div slot="header" class="spacebetween disflex align-center">
          <span style="color:#676a6f;font-size:14px">版本管理列表</span>
          <el-button class="btn btncolor" icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
        </div>
        <el-table :data="tableData" :header-cell-style="{background:'#e4ebfd',color:'#7690db'}" :row-class-name="tableRowClassName"
            default-expand-all row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="name"  label="版本名称" ></el-table-column>
            <el-table-column align="center" prop="code" label="版本编码"></el-table-column>
            <el-table-column align="center" prop="type" label="类型"></el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
            <el-table-column align="center" fixed="right"  label="操作">
              <template slot-scope="scope">
                <el-button type="text"  class="edit" @click="handlEdit(scope.row)">编辑</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" @click="handleDel(scope.row)" class="del">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--分页 -->
      <Pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.num"></Pagination>
    </div>
    <!-- 新增修改 -->
    <el-dialog :title="title" :visible.sync="isvisible" width="40%" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="80px">
        <el-form-item label="上级ID" prop="pid">
            <el-select-tree popper-class="stafftree" :popper-append-to-body="false"
                clearable style="width:100%" :highlight-current="true" 
                :props="defaultProps" 
                :default-expand-all="false" placeholder="请选择版本(不选默认为最高项)" :data="tableData" :show-checkbox="true" :check-strictly="true"
                v-model="addForm.pid" 
            ></el-select-tree>
        </el-form-item>
        <el-form-item label="版本名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="版本编号" prop="code">
          <el-input v-model="addForm.code"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="code">
          <el-select v-model="addForm.type" placeholder="请选择">
                <el-option
                v-for="item in statuslist"
                :key="item.code"
                :label="item.name"
                :value="item.code">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitAdd('addForm')" class="btncolor" size="small" :loading="loading" :disabled="loading">确定</el-button>
          <el-button @click="isvisible = false" size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { versionpage,versionadd,versiondel,versiondetail,versionupdate } from '@/api/icd.js'
import { dicttype } from "@/api/role.js";
import Pagination from '@/components/Pagination'
import {buildTree} from '@/utils/index'
export default {
  name: 'user',
  components: { Pagination },
  data() {
    return {
        total: 0,
        listLoading: true,
        listQuery: {
            page:1,
            num:10,
            name:'',
            code:'',
            type:''
        },
        defaultProps: {
            parent: 'pid',   // 父级唯一标识
            value: 'id',          // 唯一标识
            label: 'name',       // 标签显示
            children: 'children', // 子级
        }, // 配置
        statuslist:[],
        tableData: [],
        addForm:{
            pid:0,
            name:'',
            code:''
        },
        title:'新增版本',
        isvisible:false,
        loading:false,
        addRules: {
            name: [
            { required: true, message: '请输入版本名称', trigger: 'blur' },
            ],
            code: [
            { required: true, message: '请输入版本编号', trigger: 'blur' },
            ],
            // pid:[
            // { required: true, message: '请输选择上级ID', trigger: 'blur' },
            // ]
        },
    }
  },
  created() {
    this.getDIctyp()
    this.getList()
  },
  methods: {
    // 设置表格颜色
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2==0) { return 'warning-row'}
      return '';
    },
    // 获取状态字典
    getDIctyp(){
      this.$getFlag().then(obj=>{
        dicttype({type:'icd_version_type'},obj.data).then(res=>{
          if(res.status == 200){
            this.statuslist = res.data
          }
        })
      })
    },
    // 获取表格列表信息
    getList() {
      this.tableData = []
      this.$getFlag().then(obj=>{
        this.listLoading = false
        versionpage(this.listQuery,obj.data).then(response => {
          this.tableData=buildTree(response.list)
          this.total = Number(response.total)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      })
    },
    // 新增弹窗
    handleAdd() {
      this.addForm = {}
      this.isvisible = true
      this.title = "新增版本"
    },
    // 新增修改确定
    onSubmitAdd(formName){
      if(!this.addForm.pid){
        this.addForm.pid = 0
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.title=='新增版本'){
            this.$getFlag().then(obj=>{
              versionadd(this.addForm,obj.data).then(res=>{
                if(res.status == 200){
                  this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                  this.getList()
                  this.isvisible = false
                }else{
                  this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
                }
              })
            })
          }else{
            this.$getFlag().then(obj=>{
              versionupdate(this.addForm,obj.data).then(res=>{
                if(res.status == 200){
                  this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                  this.getList()
                  this.isvisible = false
                }else{
                  this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
                }
              })
            })
          } 
        }else{
          this.$notify({ title: "操作失败",message: '请完成必填项！', type: "error", duration: 2000,});
        }
      })
    },
    // 编辑弹窗 获取详情
    handlEdit(row){
      this.isvisible = true
      this.title = "编辑版本"
      this.$getFlag().then(obj=>{
        versiondetail({id:row.id},obj.data).then(res=>{
          if(res.status == 200){
            this.addForm = res.data
          }
        })
      })
    },
    // 删除
    handleDel(row){
      this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        this.$getFlag().then(obj=>{
          versiondel({id:row.id},obj.data).then(res=>{
              if(res.status == 200){
                this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                this.getList()
              }else{
                this.$notify({ title: "操作失败",message: res.msg, type: "error", duration: 2000,});
              }
          })
        }) 
      })
      .catch(() => {});
    },
    //重置
    handleReset(){
      this.listQuery.pid = ""
      this.listQuery.name = ""
      this.listQuery.code = ""
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .stafftree .el-tree-node__content .el-checkbox .el-checkbox__input {
  display: none;
}
</style>
<style>
  .el-table .warning-row {
    background: #f6f9fe;
  }
</style>
